/**
 * Created by yujianfu on 2019/9/11.
 */
import React from 'react'

import {Table, Form, DatePicker, Button, Select, Radio} from 'antd'

const {RangePicker} = DatePicker
const FormItem = Form.Item
const {Option} = Select;
import {fetchPost} from '../../utils/request'
import moment from 'moment'
import ReportCommon from './ReportCommon'

class AppDataCollecting extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      params: {
        startDate: moment(moment().subtract(7, 'days'), 'YYYY-MM-DD'),
        endDate: moment(moment(), 'YYYY-MM-DD'),
      },
      startDate: null,
      endDate: null,
    }
  }

  componentDidMount() {

  }


  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, fieldsValue) => {
      const rangeValue = fieldsValue['range-picker'];
      let startDate = moment(rangeValue[0], 'YYYY-MM-DD');
      let endDate = moment(rangeValue[1], 'YYYY-MM-DD');

      this.setState({
        params: {startDate, endDate}
      })
    })
  }

  render() {

    const dateFormat = 'YYYY-MM-DD'
    const rangeConfig = {
      rules: [{type: 'array', required: true, message: 'Please select Time!'}],
      initialValue: [this.state.startDate != null ? moment(this.state.startDate, dateFormat) : moment().subtract(7, 'days'),
        this.state.endDate != null ? moment(this.state.endDate, dateFormat) : moment()]
    }

    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
    }
    const {getFieldDecorator} = this.props.form;

    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="ApplyDate"

          >
            {getFieldDecorator('range-picker', rangeConfig)(
              <RangePicker/>
            )}
          </FormItem>

          <FormItem>
            <Button type="primary" htmlType="submit">Search</Button>
          </FormItem>

        </Form>
        <br/>
        <ReportCommon params={this.state.params} queryKey="registerToPostOrder" name={"注册及转化率漏斗"}/>
        <br/>
      </div>
    )
  }
}

const a = Form.create()(AppDataCollecting)
export default a

